<template>
  <el-drawer
    :title="title"
    :visible.sync="isOpen"
    direction="rtl"
    :before-close="handleClose"
    size="50%"
  >
    <el-tabs
      :tab-position="'left'"
      type="border-card"
      :value="paneValue"
      @tab-click="changePane"
    >
      <el-tab-pane
        v-for="dict in dict.type.work_note"
        :key="dict.value"
        :label="dict.label"
      >
        <div v-if="dict.value == 4">
          <work-note-4 :deptDatas="deptDatas" @okDraw="$emit('okDraw')" />
        </div>
        <div v-else>
          <div class="paneHeader">
            <div style="display: flex; align-items: center">
              {{ dict.label }}
              <div class="status" :id="'status' + dict.value">
                {{
                  deptDatas.diagnosePlan &&
                  JSON.parse(deptDatas.diagnosePlan).filter(
                    (deptDatas) => deptDatas.workNote == dict.value
                  )
                    ? JSON.parse(deptDatas.diagnosePlan).filter(
                        (deptDatas) => deptDatas.workNote == dict.value
                      )[0]
                      ? getNoteStatus().filter(
                          (sta) =>
                            sta.value ==
                            JSON.parse(deptDatas.diagnosePlan).filter(
                              (deptDatas) => deptDatas.workNote == dict.value
                            )[0].noteStatus
                        )[0].label
                      : "未开始"
                    : "未开始"
                }}
              </div>
            </div>
            <div v-if="whichStatus(dict.value) == ' 未开始 '">
              <el-button type="primary" @click="sumbitFiles(dict.value)">
                保存
              </el-button>
            </div>
            <div v-if="whichStatus(dict.value) == ' 未通过 '">
              <el-button type="primary" @click="againFiles(dict.value)">
                保存
              </el-button>
            </div>
            <div v-else-if="whichStatus(dict.value) == ' 待审核 '">
              <el-button type="primary" @click="passFiles(dict.value)">
                通过
              </el-button>
              <el-button type="error" @click="notPassFiles(dict.value)">
                不通过
              </el-button>
            </div>
          </div>
          <div class="paneBody">
            附件
            <div class="formList">
              <div style="border: 1px solid #ccc">
                <div class="listHeader">
                  <div class="formTime">
                    <span class="demonstration">完成时间</span>
                    <el-date-picker
                      v-model="fileData.finishDate"
                      type="date"
                      size="mini"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                      :disabled="fileData.noteStatus != 0"
                    >
                    </el-date-picker>
                    <!-- <el-button
                    type="primary"
                    plain
                    size="mini"
                    style="margin-left: 15px"
                  >
                    修改
                  </el-button> -->
                  </div>
                </div>
                <file-upload2
                  v-model="tempFileList[dict.value - 1]"
                  style="margin-top: 15px; padding-left: 10px"
                />
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<script>
import fileUpload2 from "@/components/FileUpload/index2";
import {
  sumbitFile,
  passFile,
  againFile,
  getFileList,
} from "../../../api/system/deptFile";
import WorkNote4 from "./workNote4.vue";

export default {
  components: {
    fileUpload2,
    WorkNote4,
  },
  dicts: ["work_note", "note_status"],

  props: {
    isOpen: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "编辑",
    },
    deptDatas: {
      type: Object,
      default: {},
    },
    paneValue: {
      type: String || Number,
      default: "0",
    },
  },
  data() {
    return {
      fileData: {
        checkorId: this.$store.state.user.userId,
        deptId: 0,
        fileList: [],
        noteStatus: "1",
        workNote: "",
        finishDate: new Date(),
      },
      tempFileList: [],
      fileInfo: {},
    };
  },
  computed: {},
  mounted() {
    const { deptId } = this.deptDatas;
    getFileList({ workNote: parseInt(this.paneValue) + 1, deptId }).then(
      (res) => {
        if (res.data[0] && res.data[0].fileList) {
          this.$set(this.tempFileList, this.paneValue, res.data[0].fileList);
        }
        if (res.data[0] && res.data[0].finishDate) {
          this.fileData.finishDate = res.data[0].finishDate;
        } else {
          this.fileData.finishDate = new Date();
        }
        if (res.data[0] && res.data[0].noteStatus) {
          this.fileData.noteStatus = res.data[0].noteStatus;
        } else {
          this.fileData.noteStatus = 0;
        }

        this.fileInfo = res.data[0];
        console.log(res.data[0], this.fileData);
      }
    );
  },

  methods: {
    whichStatus(dict) {
      return document.getElementById("status" + dict)?.innerHTML;
    },
    changePane(pane) {
      console.log(pane.label, "pans");
      let id = parseInt(pane.$el.id.split("-")[1]) + 1;
      const { deptId } = this.deptDatas;
      getFileList({
        workNote: id,
        deptId,
      }).then((res) => {
        if (res.data[0] && res.data[0].fileList) {
          this.$set(this.tempFileList, id - 1, res.data[0].fileList);
        }
        if (res.data[0] && res.data[0].finishDate) {
          this.fileData.finishDate = res.data[0].finishDate;
        } else {
          this.fileData.finishDate = new Date();
        }

        if (res.data[0] && res.data[0].noteStatus) {
          this.fileData.noteStatus = res.data[0].noteStatus;
        } else {
          this.fileData.noteStatus = 0;
        }
        console.log(res, this.tempFileList, id, "res");
      });
    },
    getNoteStatus() {
      return this.dict.type.note_status;
    },
    handleClose(done) {
      this.$emit("closeDraw");
    },
    // 新增文件
    sumbitFiles(workNote) {
      this.fileData.deptId = this.deptDatas.deptId;
      this.fileData.workNote = workNote;
      this.fileData.fileList = this.tempFileList[workNote - 1];
      this.fileData.noteStatus = 1;
      // againFile
      sumbitFile(this.fileData).then((res) => {
        console.log(res, "添加");
        this.$emit("okDraw");
        this.$message({
          message: "保存成功",
          type: "success",
        });
      });
    },
    againFiles(workNote) {
      this.fileData.deptId = this.deptDatas.deptId;
      this.fileData.workNote = workNote;
      this.fileData.fileList = this.tempFileList[workNote - 1];
      this.fileData.noteStatus = 1;
      // againFile
      againFile(this.fileData).then((res) => {
        console.log(res, "添加");
        this.$emit("okDraw");
        this.$message({
          message: "保存成功",
          type: "success",
        });
      });
    },
    passFiles(workNote) {
      this.fileData.deptId = this.deptDatas.deptId;
      this.fileData.workNote = workNote;
      this.fileData.noteStatus = 3;
      this.fileData.fileId = this.fileInfo.fileId;
      console.log(this.fileInfo.fileId);

      delete this.fileData.fileList;

      passFile(this.fileData).then((res) => {
        console.log(res, "审核通过");
        this.$emit("okDraw");
        this.$message({
          message: "审核通过",
          type: "success",
        });
      });
    },
    notPassFiles(workNote) {
      this.fileData.deptId = this.deptDatas.deptId;
      this.fileData.workNote = workNote;
      this.fileData.fileId = this.fileInfo.fileId;
      this.fileData.noteStatus = 2;
      delete this.fileData.fileList;

      this.$prompt("请输入原因", "不通过", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.fileData.reason = value;

          passFile(this.fileData).then((res) => {
            console.log(res, "审核不通过");
            this.$emit("okDraw");
            this.$message({
              message: "审核不通过",
              type: "success",
            });
          });
        })
        .catch(() => {
          return;
        });
    },
  },
  computed: {},
  created() {
    // this.getReduceUser()
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
  padding-left: 20px;
}
.paneHeader {
  display: flex;
  justify-content: space-between;
  .status {
    border: 1px solid red;
    color: red;
    display: flex;
    height: 23px;
    width: 60px;
    font-size: 15px;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
  }
}
.paneBody {
  padding-top: 15px;
  // border: 1px solid green;
  .formList {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-left: 15px;
    padding-top: 5px;
    .listHeader {
      width: 100%;
      height: 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f2f2f2;
      padding-left: 10px;
      .formTime {
        display: flex;
        align-items: center;
        .demonstration {
          padding-right: 15px;
        }
      }
    }
  }
}
</style>
